<template>
  <div class="DatasetMapping">
    <div class="pubBig standard">
      <div class="h0 dd">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <el-row :gutter="18" style="margin-left: -9px;margin-right: 0;">
            <el-col :span="10">
              <!-- 左侧卡片开始 -->
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>资产目录</span>
                </div>
                <div class="a Ll">
                  <el-scrollbar style="height:100%;">
                    <el-tree
                      :data="datalist"
                      :props="defaultProps"
                      @node-click="handleNodeClick"
                      accordion
                      node-key="Id"
                      v-loading="isLoading"
                      class="tree"
                      style="overflow:auto;"
                      :highlight-current="true"
                    >
                      <span class="custom-tree-node" slot-scope="{ data }">
                        <!-- data.title -->
                        <span style="width: 100px">{{
                          data.Code + "  " + data.Name
                        }}</span>
                      </span>
                    </el-tree>
                  </el-scrollbar>
                </div>
                <div class="b" style="position: relative;">
                  <div style="height:80%;overflow: auto;">
                    <el-table
                      :data="tableData"
                      style="width: 100%;"
                      v-loading="isLoading_a"
                      height="600px"
                    >
                      <el-table-column prop="AssetCode" label="类目标识">
                      </el-table-column>
                      <el-table-column prop="AssetName" label="类目名称">
                      </el-table-column>
                      <el-table-column prop="FieldName" label="字段名">
                      </el-table-column>
                      <el-table-column
                        prop="ElementName"
                        label="数据元名称"
                        width="120"
                      >
                      </el-table-column>
                      <el-table-column prop="MapStatus" label="映射状态">
                        <template slot-scope="scope">
                          {{
                            scope.row.MapStatus == 0
                              ? "未映射"
                              : scope.row.MapStatus == 1
                              ? "自动映射"
                              : scope.row.MapStatus == 2
                              ? "手动映射"
                              : "未知状态"
                          }}
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                          <el-button
                            icon="el-icon-right"
                            style="color:#000"
                            type="text"
                            @click="table_left_click(scope.row)"
                          ></el-button>
                          <i
                            style="color:blue;margin-left:10px;color:#000"
                            :class="
                              scope.row.MapStatus == 0
                                ? 'el-icon-message-solid'
                                : ''
                            "
                          ></i>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style="text-align:center;">
                    <el-pagination
                      layout="prev, pager, next"
                      :total="TotalCount"
                      :page-size="page.limit"
                      @current-change="pag_change_a"
                      :current-page="page.page"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-card>

              <!-- 左侧卡片结束 -->
            </el-col>
            <el-col :span="7">
              <!-- 右侧卡片开始 -->
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>数据映射</span>
                </div>
                <template>
                  <div style="height:50%" class="YYU">
                    <div>
                      <el-row style="margin-bottom:5px">
                        <el-col :span="24">
                          <el-button size="small" @click="add" class="auto"
                            >手动映射</el-button
                          >
                          <el-button size="small" @click="add_b" class="auto"
                            >自动映射</el-button
                          >
                        </el-col>
                      </el-row>
                    </div>
                    <el-table
                      :data="list_left"
                      style="width: 45%;height:90%;overflow-y: auto;float: left"
                      height="90%"
                    >
                      <el-table-column type="index" label="序号" width="48">
                      </el-table-column>
                      <el-table-column prop="FieldName" label="数据集字段">
                      </el-table-column>
                      <el-table-column width="48">
                        <template slot-scope="scope">
                          <el-button
                            icon="el-icon-delete"
                            type="text"
                            style="color:#000"
                            @click="list_left_del(scope.row)"
                          ></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <!-- ------------------- -->
                    <el-table
                      :data="list_right"
                      style="width: 45%;height:90%;overflow-y: auto;float: right"
                      height="90%"
                    >
                      <el-table-column type="index" label="序号" width="48">
                      </el-table-column>
                      <el-table-column prop="FieldName" label="系统字段">
                      </el-table-column>
                      <el-table-column width="48">
                        <template slot-scope="scope">
                          <el-button
                            icon="el-icon-delete"
                            type="text"
                            style="color:#000"
                            @click="list_right_del(scope.row)"
                          ></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style="height:47%;position: relative;">
                    <el-table
                      :data="tableData_right"
                      style="width: 100%"
                      height="200"
                    >
                      <el-table-column
                        type="index"
                        :index="
                          (index) => {
                            return limit_b * (page_b - 1) + index + 1;
                          }
                        "
                        label="序号"
                        width="50"
                      >
                      </el-table-column>
                      <el-table-column prop="AssetField" label="数据集字段">
                      </el-table-column>
                      <el-table-column prop="ThirdField" label="三方系统字段">
                      </el-table-column>
                      <el-table-column prop="ThirdExName" label="三方系统名称">
                      </el-table-column>
                      <el-table-column label="操作" fixed="right" width="60">
                        <template slot-scope="scope">
                          <el-button
                            size="small"
                            icon="el-icon-delete"
                            @click="del(scope.row)"
                          ></el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div
                      class="block"
                      style="text-align:center;margin-top:25px"
                    >
                      <el-pagination
                        layout="prev, pager, next"
                        :total="TotalCount_b"
                        :page-size="limit_b"
                        @current-change="pag_change_b"
                        :current-page="page_b"
                      >
                      </el-pagination>
                    </div>
                  </div>
                </template>
              </el-card>
              <!-- 右侧卡片结束 -->
            </el-col>

            <el-col :span="7">
              <!-- 中间卡片开始 -->
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>三方系统数据结构</span>
                </div>
                <div style="margin-bottom:10px">
                  <el-select
                    filterable
                    v-model="options_value"
                    placeholder="请选择"
                    size="mini"
                    style="width:45%"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.Code"
                      :label="item.ApplicationName"
                      :value="item.ApplicationCode"
                      @click.native="getnext_Name(item.Child)"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    filterable
                    v-model="options_tableName"
                    placeholder="请选择"
                    size="mini"
                    @change="getTable_auto"
                    style="margin-left:10px;width:45%"
                  >
                    <el-option
                      v-for="item in options_next_name"
                      :key="item.Code"
                      :label="item.Name"
                      :value="item.Id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="a" style="margin-left:-10px">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>数据表</th>
                      </tr>
                    </thead>
                    <tbody class="isTbody" v-loading="isLoading">
                      <tr
                        v-for="(item, index) in table_auto_a"
                        :key="index"
                        @click="table_auto_a_click(item, index)"
                        :class="{ selGreen: changeSelectStyle == index }"
                      >
                        <td>{{ item }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div
                  class="b"
                  style="margin-right:-10px;height:95%;position: relative;"
                >
                  <template>
                    <el-table
                      v-loading="isSanFangBiao_loading"
                      :data="table_auto_b"
                      style="width: 100%"
                      height="535"
                    >
                      <el-table-column label="操作" width="52">
                        <template slot-scope="scope">
                          <el-button
                            icon="el-icon-back"
                            style="color:#000"
                            type="text"
                            @click="table_right_click(scope.row)"
                          ></el-button>
                        </template>
                      </el-table-column>
                      <el-table-column prop="FieldName" label="字段名">
                      </el-table-column>
                      <el-table-column prop="DbType" label="数据类型">
                      </el-table-column>
                      <el-table-column prop="Desc" label="说明">
                      </el-table-column>
                    </el-table>
                  </template>
                  <div class="block" style="text-align:center;margin-top:30px">
                    <el-pagination
                      layout="prev, pager, next"
                      :total="TotalCount_c"
                      :page-size="limit_c"
                      @current-change="pag_change_c"
                      :current-page="page_c"
                      small
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-card>
              <!-- 中间卡片结束 -->
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      datalist: [],
      defaultProps: {
        children: "Child",
        label: "Name",
      },
      isLoading: false,
      isLoading_a: false,
      tableData: [],
      node_items: {},
      page: {
        page: 1,
        limit: 13,
      },
      options: [],
      options_value: "",
      options_tableName: "",
      options_next_name: [],
      tableName: "",
      table_auto_a: [],
      table_auto_b: [],
      tableData_right: [],
      list_num: [],
      changeSelectStyle: -1,
      tip_val: "",
      list_left: [],
      list_right: [],
      left_num: 1,
      right_num: 1,
      ThirdExId: null,
      TotalCount: 1,
      TotalCount_b: 1,
      limit_b: 6,
      page_b: 1,
      TotalCount_c: 1,
      limit_c: 10,
      page_c: 1,
      isSanFangBiao_loading: false, // 三方系统数据结构loading
    };
  },
  methods: {
    getDatalist() {
      this.isLoading = true;
      this.$get("AssetDict/TreeList")
        .then((res) => {
          if (res.code == 0) {
            this.datalist = res.data;
            this.isLoading = false;
          } else if (res.code == -1) {
            this.isLoading = false;
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败，出现错误");
        });
    },
    handleNodeClick(data) {
      this.page.page = 1;
      this.page_b = 1;
      this.node_items = data;
      this.getTableData();
      this.getTableData_right();
    },
    getTableData() {
      this.isLoading_a = true;
      this.$post(
        "AssetDict/FieldPageList?assetCode=" +
          this.node_items.Code +
          "&page=" +
          this.page.page +
          "&limit=" +
          this.page.limit
      )
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.TotalCount = res.data.TotalCount;
            this.isLoading_a = false;
          } else if (res.code == -1) {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败，出现错误");
        });
    },
    getOptions() {
      this.$get("/ServiceManage/Offer/Application?dataType=3").then((res) => {
        if (res.code == 0) {
          this.options = res.data;
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      });
    },
    getnext_Name(val) {
      this.options_next_name = val;
    },
    getTable_auto(val) {
      this.ThirdExId = val;
      this.table_auto_b = [];
      this.$post("/ServiceManage/Offer/DbTables/" + val)
        .then((res) => {
          if (res.code == 0) {
            this.changeSelectStyle = -1;
            this.table_auto_a = res.data;
          } else if (res.code == -1) {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败，出现错误");
        });
    },
    table_auto_a_click(val, i, page) {
      this.isSanFangBiao_loading = true;
      if (!page) {
        this.page_c = 1;
        this.table_auto_b = [];
      }
      this.tableName = val;
      this.changeSelectStyle = i;
      // let id = val.Id
      // this.ThirdExId = val.Id
      this.$post(
        "/ServiceManage/Offer/DbFields?id=" +
          this.options_tableName +
          "&tableName=" +
          val +
          "&page=" +
          this.page_c +
          "&limit=" +
          this.limit_c
      )
        .then((res) => {
          if (res.code == 0) {
            this.TotalCount_c = res.data.TotalCount;
            this.table_auto_b = res.data.list;
            this.tip_val = res.data.list[0].TableName;
            this.isSanFangBiao_loading = false;
          } else if (res.code == -1) {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          // this.$message.error(err.msg);
          this.isSanFangBiao_loading = false;
        });
    },
    table_left_click(val) {
      let item = val;
      item.index = this.left_num;
      this.list_left.push(item);
      this.left_num += 1;
    },
    table_right_click(val) {
      let item = val;
      item.index = this.right_num;
      this.list_right.push(item);
      this.right_num += 1;
    },

    handleSelectionChange(val) {
      this.list_num = val;
    },
    getTableData_right() {
      this.$post(
        "AssetDict/MapPageList?assetCode=" +
          this.node_items.Code +
          "&page=" +
          this.page_b +
          "&limit=" +
          this.limit_b
      )
        .then((res) => {
          if (res.code == 0) {
            this.tableData_right = res.data.list;
            this.TotalCount_b = res.data.TotalCount;
          } else if (res.code == -1) {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败，出现错误");
        });
    },
    list_left_del(val) {
      var index = null;
      for (var i in this.list_left) {
        if (this.list_left[i].index == val.index) {
          index = i;
        }
      }
      this.list_left.splice(index, 1);
    },
    list_right_del(val) {
      var index = null;
      for (var i in this.list_right) {
        if (this.list_right[i].index == val.index) {
          index = i;
        }
      }
      this.list_right.splice(index, 1);
    },
    add() {
      var arr = [];
      var arr_a = [];
      for (var i in this.list_left) {
        arr.push(this.list_left[i].FieldName);
      }
      for (var i in this.list_right) {
        let newArr = {
          ThirdField: this.list_right[i].FieldName,
          ThirdDataType: this.list_right[i].DbType,
          ThirdDesc: this.list_right[i].Desc,
        };
        arr_a.push(newArr);
      }
      let body = {
        ThirdTable: this.tip_val,
        AssetCode: this.node_items.Code,
        ThirdExId: this.ThirdExId,
        AssetFieldData: arr,
        ThirdFieldData: arr_a,
      };
      this.$post("AssetDict/MapCreateBatch", body)
        .then((res) => {
          if (res.code == 0) {
            this.getTableData_right();
            this.getTableData();
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.list_left = [];
            this.list_right = [];
          } else if (res.code == -1) {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败，出现错误");
        });
    },
    del(val) {
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.$post("AssetDict/MapDelete?code=" + val.Code)
            .then((res) => {
              if (res.code == 0) {
                this.getTableData_right();
                this.getTableData();
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
              } else if (res.code == -1) {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.$message.error("操作失败，出现错误");
            });
        })
        .catch((_) => {});
    },
    pag_change_a(val) {
      this.page.page = val;
      this.getTableData();
    },
    pag_change_b(val) {
      this.page_b = val;
      this.getTableData_right();
    },
    pag_change_c(val) {
      this.page_c = val;
      this.table_auto_a_click(this.tableName, this.changeSelectStyle, val);
    },
    add_b() {
      let assetCode = this.node_items.Code;
      let thirdId = this.ThirdExId;
      let tableName = this.tableName;
      this.$post(
        "/AssetDict/MapAutoField_V2?assetCode=" +
          assetCode +
          "&thirdId=" +
          thirdId +
          "&tableName=" +
          tableName
      )
        .then((res) => {
          if (res.code == 0) {
            this.getTableData_right();
            this.$message({
              message: "操作成功",
              type: "success",
            });
          } else if (res.code == -1) {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error("操作失败，出现错误");
        });
    },
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getDatalist();
    this.getOptions();
  },
};
</script>
<style lang="scss">
.DatasetMapping {
  .dLeftMain {
    position: absolute;
    width: 370px;
    top: 45px;
    left: 0;
    bottom: 20px;
    border-right: 1px solid #ddd;
    overflow: auto;
    padding-top: 8px;
  }

  .dRightMain {
    width: 960px;
    height: 855px;
    margin-left: 300px;
    padding: 20px 0 0 20px;

    p {
      clear: noth;
      height: 32px;
      margin-bottom: 10px;

      .form-control {
        width: 200px;
      }

      span {
        display: block;
        float: left;
        width: 130px;
        line-height: 32px;

        b {
          color: red;
          position: relative;
          top: 2px;
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }
  .a {
    float: left;
    width: 30%;
    height: 600px;
    overflow: auto;
  }
  .b {
    float: right;
    width: 68%;
    height: 100%;
    overflow: auto;
  }
  .c {
    background-color: #ccc;
  }
  .el-card {
    height: 845px;
  }
  .el-card__body {
    height: 98%;
  }
  .el-card__header {
    text-align: center;
    font-weight: 700;
    font-size: 18px;
  }

  .tip_val {
    margin-top: 6px;
    margin-bottom: -6px;
    display: block;
    font-weight: 700;
    font-size: 18px;
  }
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: auto;
    height: 100%;
  }
  .el-table__body,
  .el-table__footer,
  .el-table__header {
    height: 0;
  }
  .el-col-24 {
    margin: 0 auto;
    text-align: center;
  }

  .tree {
    overflow-x: auto;
  }
  .Ll {
    border-right: 1px solid #ccc;
    padding-right: 5px;
    margin-left: 5px;
  }
  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: auto;
  }
  .el-tree > .el-tree-node {
    min-width: 100%;
    display: inline-block;
  }
  .num {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
  }
  .YYU {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
  }
  .el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
    overflow: scroll !important;
  }
}
</style>
